<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>hidden的例子</title>
		<style type="text/css">
			.wrapper {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				overflow: hidden;
			}
			
			.wrapper .content {
				width: 600px;
				height: 98px;
				border: 1px solid red;
				background-color: dodgerblue;
				color: white;
			}
			
			.wrapper2 {
				width: 100px;
				height: 100px;
				border: 1px solid black;
				overflow: hidden;
				position: relative;
			}
			
			.wrapper2 .content {
				width: 600px;
				height: 98px;
				border: 1px solid red;
				background-color: dodgerblue;
				color: white;
				position: absolute;
			}
		</style>
	</head>

	<body>
		<p>通过margin-left实现</p>
		<div class="wrapper">
			<div class="content" id="content" style="margin-left: 0px;">
				hello world!hello world!hello world!hello world!hello world!hello world!
			</div>
		</div>
		<button onclick="left()">left+50</button>
		<button onclick="right()">right+50</button>
		<hr />
		<p>通过left实现</p>
		<div class="wrapper2">
			<div class="content" id="content2" style="left: 0px;">
				hello world!hello world!hello world!hello world!hello world!hello world!
			</div>
		</div>
		<button onclick="left2()">left+50</button>
		<button onclick="right2()">right+50</button>
		<script type="text/javascript">
			var c = document.getElementById('content');

			function left() {
				if(c.style.marginLeft === '0px') {
					alert('到头了');
					return;
				}
				c.style.marginLeft = (parseInt(c.style.marginLeft) + 50) + 'px';
			}

			function right() {
				if(c.style.marginLeft === '-500px') {
					alert('到尾了');
					return;
				}
				c.style.marginLeft = (parseInt(c.style.marginLeft) - 50) + 'px';
			}
		</script>
		<script type="text/javascript">
			var c2 = document.getElementById('content2');

			function left2() {
				if(c2.style.left === '0px') {
					alert('到头了');
					return;
				}
				c2.style.left = (parseInt(c2.style.left) + 50) + 'px';
			}

			function right2() {
				if(c2.style.left === '-500px') {
					alert('到尾了');
					return;
				}
				c2.style.left = (parseInt(c2.style.left) - 50) + 'px';
			}
		</script>
	</body>

</html>